<template>
  <div class="pcs-container">
    <div class="itemCont" v-for="(pcs, index) in pcsDataList" :key="index">
      <div class="common-title">
        <p class="line"></p>
        <p class="text">{{ pcs.name }}</p>
      </div>
      <div class="cont">
        <!-- 状态栏 -->
        <div class="status-bar">
          <div class="status-item" v-for="(status, idx) in pcs.statusInfo" :key="idx">
            <span class="label">{{ status.label }}:</span>
            <span class="status">
              <i v-if="status.showDot" class="status-dot" :class="status.dotClass"></i> {{ status.value }}
            </span>
          </div>
        </div>

        <!-- 参数信息 -->
        <div class="params-container">
          <div class="params-column" v-for="(column, colIdx) in pcs.paramsColumns" :key="colIdx">
            <div class="param-item" v-for="(param, paramIdx) in column" :key="paramIdx">
              <span class="param-label">{{ param.label }}:</span>
              <span class="param-value">{{ param.value }}</span>
            </div>
          </div>
        </div>

        <!-- 支路信息 -->
        <div class="branch-info" v-for="(branch, branchIdx) in pcs.branches" :key="branchIdx">
          <div class="branch-title">{{ branch.name }} <span class="branch-status">{{ branch.status }}</span></div>
          <div class="branch-params">
            <div class="branch-param-item" v-for="(param, paramIdx) in branch.params" :key="paramIdx">
              <span class="param-label">{{ param.label }}:</span>
              <span class="param-value">{{ param.value }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 模拟PCS数据
const pcsDataList = ref([
  {
    name: '1#PCS',
    statusInfo: [
      { label: '工作状态', value: '停止', showDot: true, dotClass: 'stop' },
      { label: '并网状态', value: '并网', showDot: true, dotClass: 'normal' },
      { label: '设备状态', value: '正常', showDot: true, dotClass: 'normal' },
      { label: '控制模式', value: '就地', showDot: false }
    ],
    paramsColumns: [
      [
        { label: '总交流有功功率', value: '0 kW' },
        { label: '总交流无功功率', value: '0 kVar' },
        { label: '总交流视在功率', value: '0 kVA' },
        { label: '总交流功率因数', value: '1' }
      ],
      [
        { label: '当天交流充电量', value: '194.5 kWh' },
        { label: '当天交流放电量', value: '0 kWh' },
        { label: 'PCS模块温度', value: '36 °C' },
        { label: 'PCS环境温度', value: '39.4 °C' }
      ],
      [
        { label: 'A相电压', value: '389.7 V' },
        { label: 'B相电压', value: '388.6 V' },
        { label: 'C相电压', value: '387.8 V' },
        { label: '交流频率', value: '50 Hz' }
      ],
      [
        { label: 'A相电流', value: '1.7 A' },
        { label: 'B相电流', value: '1.7 A' },
        { label: 'C相电流', value: '1.7 A' }
      ]
    ],
    branches: [
      {
        name: '支路1',
        status: '静置',
        params: [
          { label: '直流功率', value: '0 kW' },
          { label: '直流电压', value: '965.1V' },
          { label: '直流电流', value: '0A' }
        ]
      }
    ]
  },
  {
    name: '2#PCS',
    statusInfo: [
      { label: '工作状态', value: '运行', showDot: true, dotClass: 'normal' },
      { label: '并网状态', value: '并网', showDot: true, dotClass: 'normal' },
      { label: '设备状态', value: '正常', showDot: true, dotClass: 'normal' },
      { label: '控制模式', value: '远程', showDot: false }
    ],
    paramsColumns: [
      [
        { label: '总交流有功功率', value: '120 kW' },
        { label: '总交流无功功率', value: '30 kVar' },
        { label: '总交流视在功率', value: '125 kVA' },
        { label: '总交流功率因数', value: '0.96' }
      ],
      [
        { label: '当天交流充电量', value: '230.2 kWh' },
        { label: '当天交流放电量', value: '45.8 kWh' },
        { label: 'PCS模块温度', value: '38 °C' },
        { label: 'PCS环境温度', value: '40.1 °C' }
      ],
      [
        { label: 'A相电压', value: '390.2 V' },
        { label: 'B相电压', value: '389.3 V' },
        { label: 'C相电压', value: '388.9 V' },
        { label: '交流频率', value: '50 Hz' }
      ],
      [
        { label: 'A相电流', value: '2.3 A' },
        { label: 'B相电流', value: '2.2 A' },
        { label: 'C相电流', value: '2.4 A' }
      ]
    ],
    branches: [
      {
        name: '支路1',
        status: '充电',
        params: [
          { label: '直流功率', value: '125 kW' },
          { label: '直流电压', value: '970.3V' },
          { label: '直流电流', value: '128.8A' }
        ]
      }
    ]
  },
  {
    name: '3#PCS',
    statusInfo: [
      { label: '工作状态', value: '故障', showDot: true, dotClass: 'stop' },
      { label: '并网状态', value: '离网', showDot: true, dotClass: 'stop' },
      { label: '设备状态', value: '故障', showDot: true, dotClass: 'stop' },
      { label: '控制模式', value: '就地', showDot: false }
    ],
    paramsColumns: [
      [
        { label: '总交流有功功率', value: '0 kW' },
        { label: '总交流无功功率', value: '0 kVar' },
        { label: '总交流视在功率', value: '0 kVA' },
        { label: '总交流功率因数', value: '0' }
      ],
      [
        { label: '当天交流充电量', value: '87.3 kWh' },
        { label: '当天交流放电量', value: '15.2 kWh' },
        { label: 'PCS模块温度', value: '44 °C' },
        { label: 'PCS环境温度', value: '42.3 °C' }
      ],
      [
        { label: 'A相电压', value: '0 V' },
        { label: 'B相电压', value: '0 V' },
        { label: 'C相电压', value: '0 V' },
        { label: '交流频率', value: '0 Hz' }
      ],
      [
        { label: 'A相电流', value: '0 A' },
        { label: 'B相电流', value: '0 A' },
        { label: 'C相电流', value: '0 A' }
      ]
    ],
    branches: [
      {
        name: '支路1',
        status: '离线',
        params: [
          { label: '直流功率', value: '0 kW' },
          { label: '直流电压', value: '0V' },
          { label: '直流电流', value: '0A' }
        ]
      }
    ]
  }
]);
</script>

<style lang="scss" scoped>
.pcs-container {
  padding: 0 0.24rem 0.24rem;
  background: #fff;

  .itemCont {
    padding-top: 0.08rem;
    margin-bottom: 0.08rem;
  }

  .cont {
    border-radius: 0.04rem;
    border: 1px solid #CDE1FE;

    .status-bar {
      display: flex;
      justify-content: space-between;
      padding: 0.1rem 0.4rem;
      background: linear-gradient(90deg, #E6F0FE 0%, #F2F3F5 100%);

      .status-item {
        display: flex;
        align-items: center;

        .label {
          color: #333;
          margin-right: 0.08rem;
        }

        .status {
          display: flex;
          align-items: center;

          .status-dot {
            display: inline-block;
            width: 0.12rem;
            height: 0.12rem;
            border-radius: 50%;
            margin-right: 0.08rem;

            &.stop {
              background-color: #f56c6c;
            }

            &.normal {
              background-color: #67c23a;
            }
          }
        }
      }
    }

    .params-container {
      display: flex;
      justify-content: space-between;
      padding: 0.12rem 0;

      .params-column {
        flex: 1;
        padding-left: 0.8rem;

        .param-item {
          height: 0.4rem;
          line-height: 0.4rem;
          display: flex;

          .param-label {
            color: #666;
            margin-right: 0.08rem;
          }

          .param-value {
            color: #333;
            font-weight: 500;
          }
        }
      }
    }

    .branch-info {
      padding-bottom: 0.12rem;
      .branch-title {
        font-weight: 500;
        padding-left: 0.6rem;
        height: 0.4rem;
        line-height: 0.4rem;

        .branch-status {
          color: #286B29;
          font-weight: normal;
          margin-left: 0.08rem;
          background: #D9F0DA;
          border-radius: 0.04rem;
          padding: 0.04rem 0.12rem;
          font-size: 0.14rem;
        }
      }

      .branch-params {
        display: flex;
        padding-left: 0.8rem;
        height: 0.4rem;
        line-height: 0.4rem;

        .branch-param-item {
          margin-right: 0.32rem;
          display: flex;

          .param-label {
            color: #666;
            margin-right: 0.08rem;
          }

          .param-value {
            color: #333;
            font-weight: 500;
          }
        }
      }
    }
  }
}
</style>
